<script lang="ts" setup>
import { onUnmounted, shallowRef, useTemplateRef, ref } from 'vue'
import type { CSSProperties } from 'vue'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useWindowSize } from '@vueuse/core'
import { useWindowResize } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const { width: viewPortWidth } = useWindowSize()

const gsapCtx = shallowRef<gsap.Context | null>(null)

const titleRef = useTemplateRef<HTMLDivElement | null>('titleRef')
const phoneRef = useTemplateRef<HTMLImageElement | null>('phoneRef')
const itemARef = useTemplateRef<HTMLDivElement | null>('itemARef')

onUnmounted(() => gsapCtx.value?.revert())

const { scrollGroup } = useScrollGroup()
const currentMode = ref<'mo' | 'pad&pc' | null>(null)
const createAnimation = () => {
  if (!titleRef.value || !phoneRef.value || !itemARef.value) {
    return
  }
  gsapCtx.value?.revert()

  gsapCtx.value = gsap.context(() => {
    if (currentMode.value === 'mo') {
      const scrollEnd = () => {
        const viewPortWidth = window.innerWidth
        const vw = 0.418
        const leftStart = Math.ceil(vw * viewPortWidth)
        return `top-=${leftStart} 30%`
      }
      const scrollStart = 'center 30%'

      ScrollTrigger.create({
        trigger: titleRef.value,
        start: scrollStart,
        endTrigger: itemARef.value,
        end: scrollEnd,
        invalidateOnRefresh: true,
        pin: true,
        pinSpacing: false,
        anticipatePin: 1,
        ...scrollGroup,
      })

      gsap.fromTo(
        phoneRef.value,
        {
          scale: 1.5,
          yPercent: -10,
        },
        {
          scale: 1,
          yPercent: 0,
          scrollTrigger: {
            trigger: titleRef.value,
            start: scrollStart,
            endTrigger: itemARef.value,
            end: scrollEnd,
            scrub: true,
            invalidateOnRefresh: true,
            ...scrollGroup,
          },
        },
      )
    } else {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: titleRef.value,
          start: 'bottom center',
          endTrigger: itemARef.value,
          end: 'bottom bottom',
          scrub: true,
          invalidateOnRefresh: true,
          ...scrollGroup,
        },
      })

      tl.fromTo(
        phoneRef.value,
        {
          scale: 1.6,
          yPercent: -45,
        },
        {
          scale: 1.4,
          yPercent: -43,
          duration: 0.3,
        },
      )
      tl.to(phoneRef.value, {
        scale: 1,
        yPercent: 0,
        duration: 0.7,
      })
    }
  })
}
useWindowResize((w: number) => {
  if (w < 640) {
    if (currentMode.value !== 'mo') {
      currentMode.value = 'mo'
      createAnimation()
    }
  } else {
    if (currentMode.value !== 'pad&pc') {
      currentMode.value = 'pad&pc'
      createAnimation()
    }
  }
})

const colorItem: {
  title: string
  bgColor: CSSProperties
  border?: CSSProperties
}[] = [
  {
    title: '人鱼姬',
    bgColor: {
      background:
        'linear-gradient(328.28deg, #d1d4d9 10.15%, #cdd0d4 21.44%, #dcecfb 32.03%, #cfe9fb 37.32%, #f5ffff 46.5%, #ebfae9 51.79%, #f3fcfc 56.73%, #f6fdfd 64.49%, #fff 83.55%)',
    },
    border: {
      backgroundClip: 'content-box, border-box',
      border: '1px solid transparent',
      backgroundImage:
        'radial-gradient(circle, #f5f5f5 99%, transparent 100%),linear-gradient(140.77deg, #fefefe 16.82%, #d7edfc 57.68%, #b1b7c1 87.06%)',
    },
  },
  {
    title: '海芋紫',
    bgColor: {
      background: 'linear-gradient(328.28deg, #bfb7d4 10.15%, #ebe5f6 83.55%)',
    },
  },
  {
    title: '礁石黑',
    bgColor: {
      background: 'linear-gradient(328.28deg, #5c5d5e 10.15%, #b0b1b3 83.55%)',
    },
  },
] as const
// FIXME: 这里的动画在手机edge浏览器上会有抖动
</script>

<template>
  <div class="item1_container" :class="{ 'pc-container-content-1312-grid': viewPortWidth < 1024 }">
    <div class="middle-content item1_content">
      <div ref="titleRef">
        <p
          class="text-[2.625rem] leading-[1.2] text-center lg:text-[clamp(2.625rem,0.7637rem+2.9083vw,4.25rem)]"
        >
          潮流人鱼姬
          <br />
          超美小直屏
        </p>
        <p
          class="text-sm text-center leading-[1.57] mt-[clamp(0.75rem,0.2845rem+2.069vw,1.125rem)] lg:text-[clamp(0.875rem,0.4455rem+0.6711vw,1.25rem)]"
        >
          它是时尚宠儿，亦是勇气化身。
          <br class="md:hidden" />
          灵动纹理如鱼尾轻摆，梦幻光影随光流转，
          <br />
          将生命力的美好定格于掌心。
        </p>
      </div>

      <div class="grid-content _grid-gap">
        <div ref="itemARef" class="item-a _rounded">
          <picture>
            <source
              media="(min-width: 1536px)"
              srcset="@/views/product/reno14-pro/image/2/images-color-white-c-1-95.png.webp"
            />
            <source
              media="(min-width: 1024px)"
              srcset="@/views/product/reno14-pro/image/2/images-color-white-c-d7111-95.png.webp"
            />
            <source
              media="(min-width: 640px)"
              srcset="@/views/product/reno14-pro/image/2/images-color-white-c-pad-1-95.png.webp"
            />
            <img
              ref="phoneRef"
              style="will-change: transform"
              src="@/views/product/reno14-pro/image/2/images-color-white-c-mo-1-95.png.webp"
              alt=""
              loading="lazy"
            />
          </picture>
        </div>

        <div class="item-b _grid-gap">
          <div class="w-full h-full bg-[#f5f5f5] _rounded">
            <picture class="min-w-0 min-h-0">
              <source
                media="(min-width: 1536px)"
                srcset="@/views/product/reno14-pro/image/2/images-color-white-l-t-1-95.jpg.webp"
              />
              <source
                media="(min-width: 1024px)"
                srcset="@/views/product/reno14-pro/image/2/images-color-white-l-t-d7111-95.jpg.webp"
              />
              <source
                media="(min-width: 640px)"
                srcset="@/views/product/reno14-pro/image/2/images-color-white-l-t-pad-1-95.jpg.webp"
              />
              <img
                class="w-full h-full object-cover"
                src="@/views/product/reno14-pro/image/2/images-color-white-l-t-mo-1-95.jpg.webp"
                alt=""
                loading="lazy"
              />
            </picture>
          </div>

          <div class="bg-[#f5f5f5] _rounded">
            <picture class="min-w-0 min-h-0">
              <source
                media="(min-width: 1536px)"
                srcset="@/views/product/reno14-pro/image/2/images-color-white-l-b-1-95.jpg.webp"
              />
              <source
                media="(min-width: 1024px)"
                srcset="@/views/product/reno14-pro/image/2/images-color-white-l-b-d7111-95.jpg.webp"
              />
              <source
                media="(min-width: 640px)"
                srcset="@/views/product/reno14-pro/image/2/images-color-white-l-b-pad-1-95.jpg.webp"
              />
              <img
                class="w-full h-full object-cover"
                src="@/views/product/reno14-pro/image/2/images-color-white-l-b-mo-1-95.jpg.webp"
                alt=""
                loading="lazy"
              />
            </picture>
          </div>
        </div>

        <div class="item-c _grid-gap">
          <div
            class="bg-[#f5f5f5] _rounded p-[3.3vw] grid max-sm:justify-center sm:p-[clamp(0.75rem,0.3333rem+1.0417vw,1rem)] sm:[grid-area:bottom]"
          >
            <div class="text-center space-y-[0.25rem]">
              <p class="text-xl">首发流光幻影工艺</p>
              <p class="text-xs">幻彩鱼尾，一机十色</p>
            </div>

            <div
              class="flex text-xs mt-[1.25rem] max-sm:justify-center max-sm:flex-wrap max-sm:gap-[12.8vw] sm:justify-between sm:mt-[1rem] xl:justify-around"
            >
              <div v-for="i in colorItem" :key="i.title" class="flex items-center gap-[0.25rem]">
                <div
                  :style="i.border"
                  class="w-[1.5rem] aspect-square rounded-full grid justify-center content-center bg-origin-border"
                >
                  <div :style="i.bgColor" class="w-[1rem] aspect-square rounded-full"></div>
                </div>
                <p class="text-xs whitespace-nowrap">{{ i.title }}</p>
              </div>
            </div>
          </div>

          <picture class="min-h-0 w-full sm:[grid-area:top]">
            <source
              media="(min-width: 1536px)"
              srcset="@/views/product/reno14-pro/image/2/images-color-white-r-1-95.jpg.webp"
            />
            <source
              media="(min-width: 1024px)"
              srcset="@/views/product/reno14-pro/image/2/images-color-white-r-d7111-95.jpg.webp"
            />
            <source
              media="(min-width: 640px)"
              srcset="@/views/product/reno14-pro/image/2/images-color-white-r-pad-1-95.jpg.webp"
            />
            <img
              class="object-cover w-full h-full"
              src="@/views/product/reno14-pro/image/2/images-color-white-r-mo-1-95.jpg.webp"
              alt=""
              loading="lazy"
            />
          </picture>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.item1_container {
  @apply flow-root rounded-t-4xl bg-white relative z-20;
}

.item1_content {
  @apply mt-[22.56vw] mb-[13.49vw]

  sm:mt-[5rem] sm:mb-[3rem]

  lg:mt-[clamp(5rem,-2.4452rem+11.6331vw,11.5rem)] lg:mb-[clamp(3rem,0.7092rem+3.5794vw,5rem)];

  ._grid-gap {
    @apply gap-[0.25rem] sm:gap-[0.375rem] lg:gap-[clamp(0.375rem,-0.125rem+0.7813vw,0.625rem)];
  }

  .grid-content {
    @apply grid mt-[80vw]

    sm:mt-[50vw] sm:h-[31.25rem]
    sm:[grid-template-areas:"B_A_C"] sm:grid-rows-[min(52.7vw,31.25rem)] sm:grid-cols-3

    lg:mx-[clamp(3.75rem,0.5rem+5.0781vw,5.375rem)] lg:h-auto lg:aspect-[31/13]
    lg:grid-rows-1;

    .item-a {
      @apply h-[67vw] bg-[#f5f5f5] @container/itemA

      sm:[grid-area:A] sm:h-full;
      clip-path: inset(-300vh -100vw 0);

      img {
        @apply relative top-[-24%] w-[59cqw] mx-auto

        sm:w-[82cqw]

        md:w-[80cqw] md:top-[-14%]

        lg:w-[70cqw] lg:top-[-14%];
      }
    }
    .item-b {
      @apply grid grid-cols-2 grid-rows-[50.7vw]

      sm:grid-cols-1 sm:grid-rows-2 sm:[grid-area:B] sm:flex-col;
    }
    .item-c {
      @apply grid

      sm:[grid-area:C] sm:[grid-template-areas:"top"_"bottom"];
    }
  }
}
</style>
